<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>加载geojson服务</title>
  <link rel="stylesheet" href="css/ol.css">
  <style>
    .map {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="map" id="map"></div>
  <script src="js/ol.js"></script>
  <script src="js/proj4.js"></script>
  <script>
    //定义2384坐标系，且与其他4326,3857的互相转换
    var projection_2384 = new ol.proj.Projection({
      code: 'EPSG:2384',
      extent: [345754.23, 2501018.29, 607809.05, 5528581.54],
      units: 'm',
      axisOrientation: 'neu'
    });
    proj4.defs("EPSG:2384", "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs");

    //结合proj4在ol中自定义坐标系
    ol.proj.addProjection(projection_2384);
    ol.proj.addCoordinateTransforms("EPSG:4326", "EPSG:2384",
      function (coordinate) {
        return proj4("EPSG:4326", "EPSG:2384", coordinate);
      },
      function (coordinate) {
        return proj4("EPSG:2384", "EPSG:4326", coordinate);
      }
    );
    ol.proj.addCoordinateTransforms("EPSG:3857", "EPSG:2384",
      function (coordinate) {
        return proj4("EPSG:3857", "EPSG:2384", coordinate);
      },
      function (coordinate) {
        return proj4("EPSG:2384", "EPSG:3857", coordinate);
      }
    );

    //地图服务范围
    var bounds = [117.09953391325766, 31.25229024843577, 117.26455914193794, 31.45925451277356];
    var geojsonLayer = new ol.layer.Vector({
      source: new ol.source.Vector({
        url: 'data/countries.geojson',
        format: new ol.format.GeoJSON()
      })
    });
    var osmLayer = new ol.layer.Tile({
      source: new ol.source.OSM({
        projection: ol.proj.getTransform('EPSG:4326', 'EPSG:2384')
      })
    });


    var map = new ol.Map({
      target: 'map',
      layers: [
        osmLayer, geojsonLayer
      ],
      view: new ol.View({
        projection: projection_2384
      })
    });
    map.getView().fit(bounds, map.getSize());
  </script>
</body>

</html>